<template>
  <div class="contract-advance-setting-title">
    <slot></slot>
    <el-switch v-model="switchValue" :active-value="true" :inactive-value="false"></el-switch>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  props: {
    switchControl: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['handleChangeSwitch'],
  setup(props, { emit }) {
    const switchValue = computed({
      get: () => {
        return props.switchControl;
      },
      set: val => {
        emit('handleChangeSwitch', val);
      },
    });

    return {
      switchValue,
    };
  },
});
</script>
<style lang="scss" scoped>
.contract-advance-setting-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #333333;
}
</style>
